
@extends('admin.common.common')

@section('head')

@endsection


@section('body')

    <article class="page-container">

        <div id="vue_hello">
            <form class="form form-horizontal" id="form-node-add" action="{{route('admin.node.store')}}"
                  method="post" enctype="multipart/form-data" @submit.prevent="dopost">
                @csrf
                @if ($errors->any())
                    <div class="Huialert-error Huialert">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>节点名称：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" class="input-text" value="" name="name" placeholder="" v-model="info.name">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>路由别名：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" class="input-text" value="" name="route_name" placeholder="" v-model="info.route_name">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>父级菜单：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <select name="pid" class="" v-model="info.pid" @change="getpid">
                            <option value="0">==顶级==</option>
                            @foreach($data as $val)
                                <option value="{{$val->id}}">{{$val->html}}{{$val->name}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>是否菜单：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="radio"  value="1"  v-model="info.is_menu">是
                        <input type="radio"  value="0"  checked v-model="info.is_menu">否
                    </div>
                </div>
                <div class="row cl">
                    <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                        <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
                    </div>
                </div>
            </form>
        </div>

    </article>
@endsection


@section('js')
    <script src="/admin/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
    <script  src="/admin/lib/jquery.validation/1.14.0/messages_zh.js"></script>
    <script src="/admin/static/vue3.0.js"></script>

    <script>
        const {createApp} = Vue
        createApp({
            data(){
                return {
                    info:{
                        _token:"{{csrf_token()}}",
                        name:'',
                        route_name:'',
                        pid:'',
                        is_menu:0
                    }
                }

            },
            //一定要加s
            methods:{
                //async await 把异步请求变成同步请求
                async dopost(env){
                    $('#form-node-add').validate({
                        rules:{
                            name:{
                                required:true
                            }
                        },
                        onkeyup:false,
                        focusCleanup:true,
                        success:"valid",
                        submitHandler:function (form) {

                        }
                    })

                    let url = env.target.action;

                    let {error_code,msg} = await $.post(url,this.info)

                    if(error_code == 0){
                        layer.msg(msg,{icon:1,time:2000},function () {
                            location.href="{{route('admin.node.index')}}";
                        })
                    }else{
                        layer.msg(msg,{icon: 5})
                    }

                },

                getpid(env){
                    let pid = env.target.value
                    this.info.pid = pid
                }
            }
        }).mount('#vue_hello')
    </script>

@endsection
